<template>
  <div>
    <van-popup v-model="show" get-container="body" style="background: none;" :close-on-click-overlay="false">
      <div class="popup-box">
        <div class="image-box" @click="jump">
          <img :src="picture" alt="">
        </div>
        <div class="close" >
          <img @click="show=false" src="@/assets/images/public/icon-close.png" alt="">
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  props: ['value', 'picture','url'],
  data() {
    return {

    }
  },
  computed: {
    show:{
      get(){
        return this.value
      },
      set(value){
        this.$emit('input',value)
      }
    }
  },
  methods: {
    jump(){
      const {url} = this
      if(!url)return ;
      this.show = false;
      if(/^http/.test(url)){
        return window.location.href = url
      }
      this.$router.push({path:url});
    }
  }
}
</script>

<style lang="less" scoped>
.popup-box{
  width: 6rem;
  .image-box{
    max-height: 60vh;
    overflow-y: scroll;
    border-radius: .32rem;
    img{
      width: 100%;

    }
  }
  .close{
    margin-top: .32rem;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: .56rem;
      height: .56rem;
    }
  }
}
</style>